
<template>
    <div style="padding-top: 10px" v-if="!isPhone">
        <el-row>
            <el-col :span="24">
                <radio-model v-model="modelSelect" :dataList="dataList"></radio-model>
            </el-col>
        </el-row>
        <!--<lar-ui-plane>-->
        <div style="padding: 10px;" >
            <grid-list :layout="layout" v-on:modifyLayout="modifyLayout"></grid-list>
        </div>

        <!--</lar-ui-plane>-->
    </div>
</template>
<script>
    import VueGridLayout from 'vue-grid-layout';
    import RadioModel from '../components/ui/Radio.vue';
    import GridList from '../components/grid/index.vue';
    export default {
        components: {
            VueGridLayout,
            GridList,
            RadioModel
        },
        data() {
            return {
                isPhone: false,
                dataList: [ // 要传进去的模板切换数据
                    {name: '标准模板', label: '0', status: true},
                    {name: '市场模板', label: '1', status: true},
                    {name: '调度模板', label: '2', status: true},
                ],
                standardlayout: [
                    {"x":0,"y":0,"w":16,"h":2,"i":"0","name":"GridLoginInfo",'params':{'title':'登陆信息','name':'default'}},
                    {"x":0,"y":2,"w":16,"h":2,"i":"1","name":"GridTodayOrder",'params':{'title':'今日订单','name':'four'}},
                    {"x":16,"y":0,"w":8,"h":4,"i":"2","name":"GridBaseDataStandard",'params':{'title':'基本数据','name':'default'}},
                    {"x":0,"y":8,"w":24,"h":10,"i":"3","name":"GridAccountRecord",'params':{'title':'账号记录','name':''}}
                ], // 传进去要渲染的标准模板
                dispatchlayout: [
                    {"x":0,"y":0,"w":12,"h":2,"i":"0","name":"GridLoginInfoDispatch",'params':{'title':'登陆信息','name':'dispatch'}},
                    {"x":0,"y":2,"w":12,"h":2,"i":"1","name":"GridTodayExpress",'params':{'title':'今日快件','name':'three'}},
                    {"x":12,"y":2,"w":12,"h":2,"i":"2","name":"GridTLegacyExpress",'params':{'title':'遗留快件','name':'three'}},
                    {"x":12,"y":0,"w":12,"h":2,"i":"3","name":"GridBaseDataDispatch",'params':{'title':'今日数据','name':'dispatch'}},
                    {"x":0,"y":8,"w":24,"h":8,"i":"4","name":"GridExpressMap",'params':{'title':'快件地图','name':''}}
                ], // 传进去要渲染的调度模板
                marketlayout: [
                    {"x":0,"y":0,"w":12,"h":2,"i":"0","name":"GridLoginInfoDispatch",'params':{'title':'登陆信息','name':'default'}},
                    {"x":12,"y":0,"w":12,"h":4,"i":"1","name":"GridShopData",'params':{'title':'消费数据','name':'shop'}},
                    {"x":0,"y":4,"w":12,"h":8,"i":"2","name":"GridChartBar",'params':{'title':'快件地图','name':'pie'}},
                    {"x":12,"y":8,"w":12,"h":8,"i":"3","name":"GridChartBar",'params':{'title':'快件地图','name':'pie'}},
                ], // 传进去要渲染的市场模板
                modelSelect: '0'
            }
        },
        computed: {
            layout: function () {
                switch (this.modelSelect) {
                    case '0':
                        return this.standardlayout;
                    case '1':
                        return this.dispatchlayout;
                    case '2':
                        return this.marketlayout;
                }
            }
        },
        mounted() {
            let ua = navigator.userAgent;
            let ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
                isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
                isAndroid = ua.match(/(Android)\s+([\d.]+)/),
                isMobile = isIphone || isAndroid;
            if(isMobile){
                this.isPhone = true;
            }else{
                this.isPhone = false;
            }
        },
        methods: {
            modifyLayout(value) {
                this.layout = value;
                // console.info('新的', JSON.stringify(this.layout));
            }
        }

    }
</script>
<style scoped>

</style>
